<template>
	
	<div class="signin">
		
		<header class="navigations">
			<div @click="rule">奖励规则<i class="issues"></i></div>
		</header>
		
		<!--<header class="navigation" v-if="signin == 'signin' ">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>每日签到</div>
			<div @click="rule">奖励规则<i class="issue"></i></div>
		</header>-->
		
		<div class="content_sidnin">
			<div class="Umoney">{{headerlist.scores}}</div>
			<div class="myU"><span>我的U币</span></div>
			
			<div class="fate">
				<div class="strip flex main_zdy">
					<div class="sky" v-if='headerlist.days < 1 '>1</div>
					<div class="succeed" v-if='headerlist.days > 0'><img src="../assets/signin/yiqiandao.png" class="succeedimg"></div>
					<div class="sky" v-if='headerlist.days < 2'>2</div>
					<div class="succeed" v-if='headerlist.days >1'><img src="../assets/signin/yiqiandao.png" class="succeedimg"></div>
					<div class="sky" v-if='headerlist.days < 3'>3</div>
					<div class="succeed" v-if='headerlist.days > 2'><img src="../assets/signin/yiqiandao.png" class="succeedimg"></div>
					<div class="sky" v-if='headerlist.days < 4'>4
						<div class="gift"><img src="../assets/signin/jingxi.png" class="giftimg"></div>
					</div>
					<div class="succeed" v-if='headerlist.days > 3'><img src="../assets/signin/yiqiandao.png" class="succeedimg">
						<div class="gift"><img src="../assets/signin/jingxi.png" class="giftimg"></div>
					</div>
					<div class="sky" v-if='headerlist.days < 5'>5</div>
					<div class="succeed" v-if='headerlist.days > 4'><img src="../assets/signin/yiqiandao.png" class="succeedimg"></div>
					<div class="sky" v-if='headerlist.days < 6'>6</div>
					<div class="succeed" v-if='headerlist.days > 5'><img src="../assets/signin/yiqiandao.png" class="succeedimg"></div>
					<div class="sky" v-if='headerlist.days < 7'>7
						<div class="gift"><img src="../assets/signin/jingxi.png" class="giftimg"></div>
					</div>
					<div class="succeed" v-if='headerlist.days > 6'><img src="../assets/signin/yiqiandao.png" class="succeedimg">
						<div class="gift"><img src="../assets/signin/jingxi.png" class="giftimg"></div>
					</div>
				</div>
			</div>
			
			<div class="signinsky" v-if='headerlist.isSigned == "yes"' @click="signinsky">连续签到{{headerlist.days}}天</div>
			<div class="signinsky" @click="signinskyon" v-if='headerlist.isSigned == "no"'>签到</div>
			
			<div class="everyday">每天签到有惊喜，赚取U币当钱花</div>
			
		</div>
		
		<div class="list flex side_sdx">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="Loading" infinite-scroll-distance="10">
				<div class="list_d flex main_zdy mainAlign_between sideAlign_center" v-for='(item,index) in signinlist'>
					<div class="flex side_sdx signintime">
						<div>完成{{signinlist.length - index}}次签到</div>
						<div>{{item.signDate}}</div>
					</div>
					<div class="addU">+{{item.score}}U币</div>
				</div>
				
				<div class="more" v-if='hide == true'>没有更多了～</div>
			</ul>
		</div>
		
		<div class="signinSucceed" v-show="signinSucceedshow">
			<div class="signinSucceed_d">
				<div class="signinSucceed_d_succeed">签到成功</div>
				<div class="signinU">恭喜您已成功获得{{scores}}U币</div>
				<div class="income" @click="incomeon">收入囊中</div>
			</div>
		</div>
		
		<div class="help" v-show="helpshow">
			<div class="help_d">
				<h4>友惠家签到奖励规则</h4>
				
				<div class="help_c">
					 <span>本协议是您与友惠家App所有者（以下简称为“友惠家App”）之间就友惠家App服务等相关事宜所订立的契约，请您仔细阅读本注册协议，您点击“同意以下协议，提交”按钮后，本协议即构成对双方有约束力的法律文件。</span>
					 <div>
					 	<p>1、什么是每日签到任务</p>
					 	<span>每天签到即可获取U币，签到后还可以获取额外的礼品，U币可以用于购买商品。</span>
					 </div>
					 <div>
					 	<p>2、什么是连签奖励</p>
					 	<span>对于签到的新用户，连续签到数天后即可获得额外的奖励。需要注意的是，必须要每日的连续签到，达到一定的日期来可以得到获取的奖励哦。中途断签的话，连续签到周期降重新计数。</span>
					 </div>
					 <div>
					 	<p>3、什么是连签奖励</p>
					 	<span>对于签到的新用户，连续签到数天后即可获得额外的奖励。需要注意的是，必须要每日的连续签到，达到一定的日期来可以得到获取的奖励哦。中途断签的话，连续签到周期降重新计数。</span>
					 </div>
					 <div>
					 	<span>本站的各项电子服务的所有权和运作权归友惠家所有。用户同意所有注册协议条款并完成注册程序，才能成为本站的正式用户。用户确认：本协议条款是处理双方权利义务的契约，始终有效，法律另有1.1
本站的各项电子服务的所有权和运作权归友惠家所有。用户同意所有注册协议条款并完成注册程序，才能成为本站的正式用户。用户确认：本协议条款是处理双方权利义务的契约，始终有效，法律另有1.1本
本站的各项电子服务的所有权和运作权归友惠家所有。用户同意所有注册协议条款并完成注册程序，才能成为本站的正式用户。用户确认：本协议条款是处理双方权</span>
					 </div>
				</div>
				
				<div class="return" @click="returnon">返回</div>
				
			</div>
		</div>
		
	</div>
	
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				helpshow:false,
				signinSucceedshow:false,
//				signin:'',
				token:'',
				index:0,
				headerlist:[],
				scores:'',
				signinlist:[],
				loading:'',
				hide:false,
				appId:'',
			}
		},
		created(){
			this.token = this.$route.query.token;
			this.appId = this.$route.query.appId;
//			this.signin = this.$route.query.signin;
			this.init();
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//打开奖励规格
			rule:function(){
				this.helpshow = true;
			},
			//关闭奖励规格
			returnon:function(){
				
				this.helpshow = false;
			},
			signinsky:function(){
				Toast({
					message: "您今天已签到了",
					position: 'middle',
					duration: 3000
				})
			},
			//打开签到提示
			signinskyon:function(){
				this.sign();
				this.signinSucceedshow = true;
			},
			//关闭签到提示
			incomeon:function(){
				this.signinSucceedshow = false;
			},
//			签到
			sign(){
				var url = BaseUrl + 'market/sign?token=' + this.token + '&appId=' + this.appId;
				this.$http.post(url).then(res=>{
					if(res.data.code == '10000'){
						this.scores = res.data.data.score;
						this.init();
						this.index=0;
						this.signinlist = [];
						this.list(this.index);
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: '网络异常',
						position: 'middle',
						duration: 3000
					})
				})
			},
			//初始化获取
			init(){
				var url = BaseUrl + 'market/init?token=' + this.token + '&appId=' + this.appId;
				this.$http.post(url).then(res=>{
					if(res.data.code == '10000'){
						this.headerlist = res.data.data;
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: '网络异常',
						position: 'middle',
						duration: 3000
					})
				})
			},
			//签到列表
			list(){
				var url = BaseUrl + 'market/list?token=' + this.token + '&appId=' + this.appId + '&start=' + this.index + '&length=10';
				this.$http.post(url).then(res=>{
					this.signinlist = this.signinlist.concat(res.data.data);
					if(res.data.data == "") {
						this.hide = true;
						this.loading = true;
						return;
					} else if(res.data.data != "") {
						this.loading = false;
						this.index++;
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: '网络异常',
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore(){
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.list(this.index);
						this.loading = this.loading;
					}, 100);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.signin{
		width: 100%;
		height: 100%;
		background: #F4F7FA;
	}
	.navigations{
		position: absolute;
		top: 0.5rem;
		right: 0.3rem;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #303133;
		letter-spacing: 0;
		color: #FFFFFF;
	}
	
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.navigation div:nth-child(2){
		font-family: PingFangSC-Medium;
		font-size: 0.36rem;
		color: #303133;
		letter-spacing: 0;
		margin-left: 1rem;
	}
	
	.navigation div:nth-child(3){
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #303133;
		letter-spacing: 0;
	}
	
	.issues{
		width: 0.23rem;
		height: 0.23rem;
		margin-left: 0.08rem;
		display: inline-block;
		background-image: url(../assets/signin/guize_d.png);
		background-size: 0.23rem 0.23rem;
	}
	
	.issue{
		width: 0.23rem;
		height: 0.23rem;
		margin-left: 0.08rem;
		display: inline-block;
		background-image: url(../assets/signin/guize.png);
		background-size: 0.23rem 0.23rem;
	}
	
	.content_sidnin{
		width: 100%;
		height: 5.6rem;
		background-image: url(../assets/signin/bg.png);
		background-size:100% 100% ;
		padding-top: 0.26rem;
		box-sizing: border-box;
	}
	
	.Umoney{
		font-family: PingFangSC-Semibold;
		font-size: 0.8rem;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}
	
	.myU{
		text-align: center;	
	}
	
	.myU span{
		font-family: PingFangSC-Regular;
		font-size: 0.26rem;
		color: #FFFFFF;
		letter-spacing: 0;
		background: #F2B463;
		box-shadow: 0 0 16px 0 rgba(141,19,37,0.14);
		border-radius: 1rem;
		padding: 0.05rem 0.1rem;
	}
	
	.fate{
		margin-top: 1.35rem;
	}
	
	.strip{
		width: 100%;
		height: 0.06rem;
		background: #FFDF48;
	}
	
	.sky{
		width: 0.5rem;
		height: 0.5rem;
		background: #F2B463;
		box-shadow: inset 1px 1px 0 0 #A96F24, inset -1px -1px 0 0 #FFCE8E;
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		line-height: 0.5rem;
		margin-left: 0.5rem;
		position: relative;
		top: -0.22rem;
		left: 0;
	}
	
	.succeed{
		width: 0.55rem;
		height: 0.55rem;
		margin-left: 0.4rem;
		position: relative;
		top: -0.25rem;
		left: 0;
	}
	.succeedimg{
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.gift{
		position: relative;
		top: -1.2rem;
		left: -0.03rem;
	}
	.giftimg{
		width: 0.6rem;
		height: 0.68rem;
	}
	
	.signinsky{
		width: 3rem;
		height: 1.06rem;
		background: #FFFFFF;
		box-shadow: 0 12px 24px 0 rgba(150,17,36,0.15), inset 6px -8px 9px 0 rgba(0,0,0,0.22);
		border-radius: 1rem;
		text-align: center;
		line-height: 1.06rem;
		font-family: PingFangSC-Regular;
		font-size: 0.36rem;
		color: #FF6742;
		letter-spacing: 0;
		margin:  0.5rem auto;
		margin-bottom:0 ;
	}
	
	.everyday{
		font-family: PingFangSC-Regular;
		font-size: 0.26rem;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		margin-top: 0.22rem;
	}
	
	.list{
		background: #FFFFFF;
	}
	
	.list_d{
		padding: 0.33rem 0.3rem 0.36rem 0.3rem;
		border-bottom: 1px solid #F6F6F6;
	}
	
	.signintime div:nth-child(1){
		font-family: PingFangSC-Regular;
		font-size: 0.28rem;
		color: #606266;
	}
	
	.signintime div:nth-child(2){
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
	}
	
	.addU{
		font-family: PingFangSC-Medium;
		font-size: 0.32rem;
		color: #303133;
	}
	
	.more{
		font-family: PingFangSC-Regular;
		font-size: 0.26rem;
		color: #8F9399;
		letter-spacing: 0;
		padding:0.3rem 0;
		text-align: center;
		background: #F4F7FA;
	}
	
	.help{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		position: fixed;
		top: 0;
		left: 0;
		padding: 0.32rem;
		box-sizing: border-box;
	}
	
	.help_d{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		border-radius: 0.26rem;
		padding-top: 0.76rem;
		padding-bottom: 0.5rem;
		box-sizing: border-box;
	}
	
	h4{
		font-family: PingFangSC-Medium;
		font-size: 0.36rem;
		color: #333333;
		letter-spacing: 0.77px;
		text-align: center;
		margin-bottom: 0.37rem;
	}
	
	.help_c{
		width: 85%;
		height: 80%;
		overflow-y: auto;
		margin: 0 auto;
	}
	.help_c span{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #979797;
		letter-spacing: 0.64px;
	}
	.help_c div{
		margin-top: 0.3rem;
	}
	
	.return{
		width: 90%;
		height: 0.8rem;
		background: #ff2040;
		text-align: center;
		border-radius: 1rem;
		line-height: 0.8rem;
		margin:  0 auto;
		color: #fff;
		margin-top: 0.5rem;
	}
	
	.signinSucceed{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		position: fixed;
		top: 0;
		left: 0;
		padding: 0.32rem;
		box-sizing: border-box;
	}
	
	.signinSucceed_d{
		width: 80%;
		overflow: auto;
		margin: 60% auto;
		background: #FFFFFF;
		border-radius: 0.22rem;
	}
	.signinSucceed_d_succeed{
		font-family: PingFangSC-Medium;
		font-size: 0.36rem;
		color: #303133;
		text-align: center;
		padding: 0.56rem 0 0.41rem 0;
	}
	
	.signinU{
		font-family: PingFangSC-Regular;
		font-size: 0.32rem;
		color: #606266;
		text-align: center;
		margin-bottom: 0.99rem;
	}
	
	.income{
		height: 1rem;
		background: #ff2040;
		border-radius: 0 0 0.22rem 0.22rem;
		text-align: center;
		line-height: 1rem;
		color: #FFFFFF;
	}
</style>